<template>
    <div class="gray-body w750">
        <van-tabs
            v-model="active"
            :swipe-threshold="5"
            :color="themes.color"
            :title-active-color="themes.color"
            @change="switchType"
            sticky
            :offset-top="0"
            title-inactive-color="#999"
        >
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-tab :title="item.name" v-for="(item, index) in navArr" :key="index">
                    <van-list
                        v-if="paging.tab"
                        v-model="paging.loading"
                        :finished="paging.finished"
                        :finished-text="!paging.emptylist ? '没有更多了' : ''"
                        @load="onLoad"
                        :immediate-check="false"
                        :error.sync="paging.error"
                        error-text="请求失败，点击重新加载"
                    >
                        <div class="order-list" :class="themes.theme">
                            <div class="list-item" v-for="(order, index) in orderArr" :key="index">
                                <!-- 类型 -->
								<div class="item-shop" v-if="order.sourceName">
									<div class="py-1">
										<span class="iconfont icondianpu" style="font-size: 14px"></span>
										<span class="ml-03 font-14">{{order.sourceName}}</span>
									</div>
								</div>
                                <div class="item-tit">
                                    <div class="order-num">
                                        订单号：
                                        <span class="num">{{ order.subNum }}</span>
                                    </div>
                                    <div class="order-state" v-if="order.status == 1"><div class="sta cur">待付款</div></div>
                                    <div class="order-state" v-if="order.status == 2">
                                        <div class="sta cur" v-if="order.mergeGroupStatus == 0 && order.activeType == 'MERGE_GROUP'">待成团</div>
                                        <div class="sta" style="color: red" v-else-if="order.overseasCustomsStatus == 'FAIL_CUSTOMS'">清关失败</div>
                                        <div class="sta cur" v-if="order.refundState == 0">
                                            {{ order.deliveryType == 'sinceMention' ? '待备货' : '待发货' }}
                                        </div>
                                        <div class="sta cur" v-if="order.refundState == 1">售后处理中</div>
                                        <div class="sta cur" v-if="order.refundState == 2">售后部分完成</div>
                                        <div class="sta cur" v-if="order.refundState == 3">售后已完成</div>
                                    </div>
                                    <div class="order-state" v-if="order.status == 3">
                                        <div class="sta cur" v-if="order.refundState == 0">
                                            {{ order.deliveryType == 'sinceMention' ? '已备货' : '待收货' }}
                                        </div>
                                        <div class="sta cur" v-if="order.refundState == 1">售后处理中</div>
                                        <div class="sta cur" v-if="order.refundState == 2">售后部分完成</div>
                                        <div class="sta cur" v-if="order.refundState == 3">售后已完成</div>
                                    </div>
                                    <div class="order-state" v-if="order.status == 4">
                                        <div class="sta">已完成</div>
                                        <div class="del" @click="deleteOrder(order.subNum, true)">
                                            <img class="delImg" src="../../assets/images/delete.png" alt="" />
                                        </div>
                                    </div>
                                    <div class="order-state" v-if="order.status == 5">
                                        <div class="sta">已取消</div>
                                        <div class="del" @click="deleteOrder(order.subNum, true)">
                                            <img class="delImg" src="../../assets/images/delete.png" alt="" />
                                        </div>
                                    </div>
                                </div>
                                <!-- 类型 -->
                                <div v-if="order.subOrderItemDtos.length == 1">
                                    <div
                                        class="pro-mes clearfix"
                                        v-for="(item, index) in order.subOrderItemDtos"
                                        :key="index"
                                        @click="enterOrderDetail(order.subNum)"
                                    >
                                        <div class="pro-img">
                                            <!-- <img v-lazy="$imgUrlHead + item.pic" alt=""> -->
                                            <legend-image :pic="item.pic" :isJD="item.prodSource == 'JD'" :options="{ w: '160', h: '160' }" />
                                            <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.goodsType == 'overseas'" />
                                            <!-- 如果是赠品则展示 -->
                                            <span v-if="item.isPresent == true">
                                            	<span class="text" v-if="item.prodSource == 'JD'">京东赠品</span>
                                            	<span class="text" v-else>赠品</span>
                                            </span>
                                        </div>
                                        <div class="pro-name">
                                            <div class="name">{{ item.prodName }}</div>
                                            <div class="sku">
                                                <span style="margin-right: 10px" v-if="item.attribute">{{ item.attribute }}</span>
                                                <span class="goods-num">数量：{{ item.basketCount }}</span>
                                            </div>
                                            <span class="price">
                                                ￥
                                                <em class="now">{{ Money(item.price)[0] }}</em>
                                                .{{ Money(item.price)[1] }}
                                            </span>
                                        </div>
                                        <!-- <div class="pro-num">×{{item.basketCount}}</div> -->
                                    </div>
                                </div>

                                <div v-else>
                                    <div class="pro-mes clearfix" @click="enterOrderDetail(order.subNum)" style="overflow-x: auto">
                                        <div class="pro-img flex-none" v-for="(item, index) in order.subOrderItemDtos" :key="index">
                                            <legend-image :pic="item.pic" :isJD="item.prodSource == 'JD'" :options="{ w: '160', h: '160' }" />
                                            <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.goodsType == 'overseas'" />
											<!-- 如果是赠品则展示 -->
											<span v-if="item.isPresent == true">
												<span class="text" v-if="item.prodSource == 'JD'">京东赠品</span>
												<span class="text" v-else>赠品</span>
											</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="total">
                                    <div class="left">
										<div v-if="order.activeType == 'MERGE_GROUP'">拼团订单</div>
										<!-- <div v-if="order.freightAmount" style="color: #000;">{{ order.freightAmount }}</div> -->
									</div>
                                    <div class="right">
                                        <span class="total-number">共{{ order.prodCount }}件商品</span>
                                        <span class="total-price">
                                            合计：
                                            <span class="price">
                                                ￥
                                                <em class="now">{{ Money(order.actualTotal)[0] }}</em>
                                                .{{ Money(order.actualTotal)[1] }}
                                            </span>
                                        </span>
                                    </div>
                                </div>

                                <div class="item-btn" v-if="order.status == 1">
                                    <span v-if="order.supportInvoice && order.invoiceId === 0" class="btn" @click="goInvoice(order.subNum)">
                                        申请发票
                                    </span>
                                    <span v-if="order.invoiceId > 0" class="btn" @click="goInvoiceDetail(order.invoiceId)">查看发票</span>
                                    <span class="btn" @click="cancelOrder(order.subNum)">取消订单</span>
                                    <span class="btn cur" @click="payment(order.subNum)">立即付款</span>
                                </div>

                                <div class="item-btn" v-if="order.status == 2">
                                    <span v-if="order.supportInvoice && order.invoiceId === 0" class="btn" @click="goInvoice(order.subNum)">
                                        申请发票
                                    </span>
                                    <span v-if="order.invoiceId > 0" class="btn" @click="goInvoiceDetail(order.invoiceId)">查看发票</span>
                                    <span
                                        class="btn cur"
                                        v-if="(order.activeType == 'MERGE_GROUP' && order.mergeGroupStatus == 1) || order.activeType != 'MERGE_GROUP'"
                                        @click="remindDelivery(order.subNum)"
                                    >
                                        提醒发货
                                    </span>
                                    <span v-if="order.deliveryType != 'merchantDelivery'" class="btn cur" @click="showSinceDialog(order.subNum)">
                                        提货凭证
                                    </span>
                                    <span class="btn cur" style="margin-right: 0;" v-if="order.activeType == 'MERGE_GROUP'" @click="gofightgroupDet(order.addNumber)">
                                        查看团详情
                                    </span>
                                </div>

                                <div class="item-btn" v-if="order.status == 3">
                                    <span v-if="order.supportInvoice && order.invoiceId === 0" class="btn" @click="goInvoice(order.subNum)">
                                        申请发票
                                    </span>
                                    <span v-if="order.invoiceId > 0" class="btn" @click="goInvoiceDetail(order.invoiceId)">查看发票</span>
                                    <span
                                        class="btn cur"
                                        v-if="!(order.refundState == 1) && order.deliveryType == 'merchantDelivery'"
                                        @click="confirmGoods(order.subNum)"
                                    >
                                        确认收货
                                    </span>
                                    <span
                                        v-if="order.deliveryType == 'merchantDelivery'"
                                        class="btn cur"
                                        @click="checkLogistical(order.subNum, order.reciverMobile)"
                                    >
                                        查看物流
                                    </span>
                                    <span v-if="order.deliveryType != 'merchantDelivery'" class="btn cur" @click="showSinceDialog(order.subNum)">
                                        提货凭证
                                    </span>
                                </div>

                                <div class="item-btn" v-if="order.status == 4 || order.status == 5">
                                    <span v-if="order.invoiceId > 0" class="btn" @click="goInvoiceDetail(order.invoiceId)">查看发票</span>
                                    <span v-if="order.supportInvoice && order.invoiceId === 0" class="btn" @click="goInvoice(order.subNum)">
                                        申请发票
                                    </span>
                                    <span class="btn cur" @click="goBuy(order.subNum)">再次购买</span>
                                    <span
                                        v-if="order.deliveryType != 'merchantDelivery' && order.status == 4"
                                        class="btn cur"
                                        @click="showSinceDialog(order.subNum)"
                                    >
                                        提货凭证
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-list>

                    <Noempty
                        :pic="require('../../assets/images/order-empty.png')"
                        :title="'您没有相关订单'"
                        v-if="paging.emptylist && !paging.error"
                    />
                </van-tab>
            </van-pull-refresh>
        </van-tabs>

        <!-- 提货凭证dialog -->
        <sinceMentionDialog v-model="proofShow" :subNumber="subNumber" refresh />

    </div>
</template>

<script>
import orderMixin from 'mixin/orderMixin.js'
import Noempty from 'components/Noempty/Noempty'
import HeadSelect from 'components/headBox/headSelect'
import legendImage from 'components/legendImage/legendImage'
import sinceMentionDialog from '@/components/sinceMentionDialog/sinceMentionDialog'
import cash from 'utils/tool'
import { mapState } from 'vuex'
import { orderList, orderListTabDisplay } from 'api/order'
import PageUtil from 'utils/PageUtil'
const pageUtil = new PageUtil(orderList, {
    field: {
        list: 'orderArr'
    }
})
export default {
    mixins: [orderMixin],
    components: {
        HeadSelect,
        Noempty,
        legendImage,
        sinceMentionDialog
    },
    data() {
        return {
            Money: cash, //价格转换
            orderArr: [],
            active: 0,
            status: null,
            isLoading: false,
            subNumber: '', //订单编号
            paging: {
                tab: false,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            navArr: [
                {
                    name: ' 全部' // state_type  null
                },
                {
                    name: '待付款' // state_type  1
                },
                {
                    name: '待发货' // state_type  2
                },
                {
                    name: '待收货' // state_type  3
                },
                {
                    name: '已完成' // state_type  4
                },
                {
                    name: '已取消' // state_type  5
                }
            ],

            statusMap: ['', 1, 2, 3, 4, 5],
            statusDict: {
                ' ': 0,
                1: 1,
                2: 2,
                3: 3,
                4: 5,
                0: 4,
                5: '6'
            },

            // 提货凭证
            proofShow: false,
            subNumber: '' // 订单号
        }
    },
    created() {},

    mounted() {
        this.getGroupState()
        let that = this

        if (sessionStorage.getItem('status')) {
            let status = sessionStorage.getItem('status')
            this.active = this.statusDict[status] * 1
        }

        if (this.$route.query.status) {
            sessionStorage.setItem('status', this.$route.query.status)
            this.active = this.statusDict[this.$route.query.status] * 1
        }

        let sessionStatus = sessionStorage.getItem('status')
        this.status = isNaN(parseInt(sessionStatus)) ? ' ' : parseInt(sessionStatus)

        let params = { status: this.status }

        pageUtil.loadListByPage(that, params)
    },

    methods: {
        getGroupState() {
            orderListTabDisplay()
                .then((res) => {
                    if (!res.success) return void this.$toast(res.msg)

                    if (res.result) {
                        this.navArr.splice(4, 0, { name: '待成团' })
                        this.statusMap.splice(4, 0, 0)
                    }
                })
                .catch((err) => {
                })
        },

        // 去申请发票
        goInvoice(num) {
            this.$router.push({
                name: 'invoice',
                query: {
                    type: 1, //0为付款前 1为付款后申请发票
                    subNumber: num // 订单号
                }
            })
        },
        goback() {
            this.$router.push('/my')
            this.$router.isBack = true
        },
        switchType(e, name) {
            let that = this
            let switchNumber = e

            this.status = this.statusMap[switchNumber]
            sessionStorage.setItem('status', this.status)

            let params = { status: this.status }
            pageUtil.loadListByPage(that, params)
        },
        //获取订单列表数据

        //加载更多
        onLoad() {
            pageUtil.loadListByPageMore()
        },

        //查看订单详情
        enterOrderDetail(subNumber) {
            this.$router.push({
                path: `/orderDetail`,
                query: {
                    subNumber: subNumber
                }
            })
        },

        refreshPage() {
            let params = { status: this.status }
            pageUtil.loadListByPage(this, params)
        },
        onRefresh() {
            this.Nomsg = false
            setTimeout(() => {
                this.refreshPage()
                this.$toast('刷新成功')
                this.isLoading = false
                // this.count++;
            }, 500)
        },

        // 展示提货凭证dialog
        showSinceDialog(subNumber) {
            this.subNumber = subNumber
            this.proofShow = true
        },
        // 去开票详情
        goInvoiceDetail(id) {
            this.$router.push({
                name: 'invoiceDetail',
                query: {
                    id: id //订单号
                }
            })
        }
    },
    computed: {
        ...mapState(['themes'])
    }
}
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/order.css" scoped></style>

<style scoped>
.order-list .list-item .pro-mes .pro-img {
    position: relative;
}
.order-list .list-item .pro-mes .pro-img .text {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 12px;
    left: 0;
}

.order-list .list-item .pro-mes .pro-img .haitao {
    position: absolute;
    top: 0;
    left: 0px;
    width: 30px !important;
    height: 30px !important;
}

.order-list .list-item .item-tit {
    /* margin-top: 10px; */
}

.item-shop {
	padding: 0 10px;
}
</style>
